<template>
	<view class="detailLayout">
		<view class="soupDetail">
			<soup-tab-group></soup-tab-group>
			<soup-text-content :lookState="true"></soup-text-content>
		</view>
		
		<view class="comment">
			<view class="list">
				<view class="row">
					<comment-item :subReply="true"></comment-item>
				</view>
			</view>
		</view>
		
		<view class="interactive">
			<interactive-bar :type="1" @comment="handelComment"></interactive-bar>
			<view class="safe-area-bottom"></view>
		</view>
		
	</view>
	
	<uni-popup type="bottom" ref="commentPopup">		
		<comment-reply></comment-reply>
	</uni-popup>
	
</template>

<script setup>
import { ref } from 'vue';
const commentPopup = ref(null);

const handelComment = ()=>{
	commentPopup.value.open();	
}
</script>

<style lang="scss" scoped>
.soupDetail{
	padding:50rpx 30rpx;
	border-bottom:12rpx solid #F7F7F7;
}
.comment{
	min-height: 800rpx;
}
.interactive{	
	position: fixed;
	width: 100%;
	bottom:0;
	left:0;
	background: #fff;
	border-top:1px solid #e4e4e4;
}



</style>
